<template>
  <div class="mine-outer">
    <Header />
    <div class="mine-concent">

      <div class="left-counter">
        <router-link tag="div" to="/mine/account">
          <p :class="currIndex == '#/mine/account' ? 'selected' : ''" @click="handleSelect()"><i
              class="el-icon-user"></i>{{ $t('assemble.我的账户') }}</p>
        </router-link>
        <router-link tag="div" to="/mine/address">
          <p :class="currIndex == '#/mine/address' ? 'selected' : ''" @click="handleSelect()">{{ $t('assemble.地址') }}</p>
        </router-link>
        <router-link tag="div" to="/mine/changepassword">
          <p :class="currIndex == '#/mine/changepassword' ? 'selected' : ''" @click="handleSelect()">{{ $t('assemble.修改密码') }}</p>
        </router-link>
        <div class="shu"></div>

        <router-link tag="div" to="/mine/orderlist">
          <p :class="currIndex == '#/mine/orderlist' ? 'selected' : ''" @click="handleSelect()"><i
              class="el-icon-document-copy"></i>{{ $t('assemble.订单列表') }}
          </p>
        </router-link>
      </div>


      <div class="right-counter">
        <router-view></router-view>
      </div>
    </div>
    <Footer />
  </div>
</template>

<script>
import Header from '@/components/header/index.vue'
import Footer from '@/components/footer/index.vue';
export default {
  components: {
    Header,
    Footer
  },
  data() {
    return {
      currIndex: "#/mine/address",
    }
  },
  mounted() {
    this.currIndex = window.location.hash
  },
  methods: {
    handleSelect() {
    }
  },
}
</script>


<style lang="scss" scoped>
.mine-outer {
  // height: 100vh;


  .mine-concent {
    // width: 1920px; 原来的
    width: 1200px;
    margin: 0 auto;
    // margin-top: 80px;
    display: flex;
    // align-items: center;
    gap: 15px;

    .left-counter {
      margin-top: 80px;

      width: 240px;
      // height: 100vh;
      background: #FFFFFF;
      box-shadow: 5px 0px 15px 0px rgba(224, 0, 0, 0.05);
      border-radius: 0px 0px 0px 0px;
      opacity: 1;
      padding: 50px 20px;
      box-sizing: border-box;
      font-size: 15px;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #333333;
      line-height: 23px;

      p {
        width: 200px;
        height: 44px;
        border-radius: 10px 10px 10px 10px;
        opacity: 1;
        text-align: center;
        line-height: 44px;
        cursor: pointer;

      }

      .selected {
        background: #E00000;
        color: #FFFFFF;
      }

      .shu {
        width: 202px;
        height: 1px;
        opacity: 1;
        background-color: #EDEDED;
        margin: 50px 0;
      }
    }
  }
}
</style>